<div class="w100 h100">
  <div nz-row [nzGutter]="16">
    <div nz-col nzSpan="4" class="h100">
      <nz-card nzTitle="Todo" cdkDropList (cdkDropListDropped)="drop($event)"
               #todoList="cdkDropList"
               [cdkDropListData]="todo"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list">
        <div *ngFor="let item of todo;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="4">
      <nz-card nzTitle="In Progress" cdkDropList
               #inProgressList="cdkDropList"
               [cdkDropListData]="inProgress"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list"
               (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of inProgress;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="4">
      <nz-card nzTitle="Review" cdkDropList
               #reviewList="cdkDropList"
               [cdkDropListData]="review"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list"
               (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of review;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="4">
      <nz-card nzTitle="Test" cdkDropList
               #testList="cdkDropList"
               [cdkDropListData]="test"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list"
               (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of test;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="4">
      <nz-card nzTitle="Done" cdkDropList
               #doneList="cdkDropList"
               [cdkDropListData]="done"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list"
               (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of done;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
    <div nz-col nzSpan="4">
      <nz-card nzTitle="Invalid" cdkDropList
               #invalidList="cdkDropList"
               [cdkDropListData]="invalid"
               [cdkDropListConnectedTo]="[inProgressList,reviewList,testList,todoList,doneList,invalidList]"
               class="example-list"
               (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of invalid;track item;">
          <nz-card style="width:180px;" [nzTitle]="item.title" cdkDrag>
            <p>{{item.content}}</p>
          </nz-card>
        </div>
      </nz-card>
    </div>
  </div>
</div>
